<template>
  <a-card>
    <div slot="title" class="title">
      <div class="title_combination">
        <a-button @click="handleBack" type="text" size="large"  style="font-weight: 550; font-size: 1.2rem;border: none;margin: 0;padding: 0px 0px 0px 0px;">
          <a-icon type="arrow-left" />
          返回
        </a-button>
        <a-divider type="vertical" style=" height: 18px;margin: 0px 16px;" />
<!--        <div class="title_prefix"></div>-->
        <div class="title_center">
          <a-popover placement="topLeft">
            <template slot="content">
              <span>{{ descriptions.title }}</span>
            </template>
            {{ descriptions.title }}
          </a-popover>
          <a-tag color="#1EBD54">{{ descriptions.status }}</a-tag>
          <a-tag color="#108ee9">{{ descriptions.type }}</a-tag>
          <a-tag color="#2db7f5">{{ descriptions.pubunitname }}</a-tag>
        </div>
      </div>
    </div>

    <a-divider />

    <a-tabs v-model="key" @change="tabChange">
      <!-- 法律条文 -->
      <a-tab-pane key="1">
        <span slot="tab">
          <a-icon type="unordered-list" />
          法律条文
        </span>
            <!-- 查询条件 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-collapse v-model="collapseKey" class="collapseArea" expandIconPosition="right">
                <div>
                  <div slot="header" class="collapseArea_header" style="">
                    <a-row :gutter="48">
                      <a-col @click.stop="() => {}" :md="6" :sm="24">
                        <a-form-item label="检索：">
                          <a-input v-model="keyword" placeholder="请输入检索关键词" @blur="getDetailData()" allowClear />   
                        </a-form-item>
                      </a-col>                 
                      <a-col :md="6" :sm="24"  :offset="12">
                        <a-button type="primary" class="btn_primary_color" style="margin-left: 20px"
                                  @click.stop="getDetailData()" icon="search">查询
                        </a-button>
                        <a-button icon="reload" class="btn_normal_color" style="margin-left: 8px" @click.stop="reQuery">重置
                        </a-button>
                      </a-col>
                    </a-row>
                  </div>

                </div>
              </a-collapse>
            </a-form>
          </div>


        <div class="formBox">
          <a-collapse v-model="activeKey" :bordered="false" v-for="(item, index) in listData" :key="index">
            <template #expandIcon="props">
              <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
            </template>
            <a-collapse-panel :key="String(index)" :header="item.title" :style="customStyle">
              <p class="content-font-style" v-html="highlightKeyword(item.content)" > </p>
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2">
        <span slot="tab">
          <a-icon type="book" />
          法律文书
        </span>
        <div class="formBox">
          <iframe id="iframe" :src="fileUrl" width="100%" height="80vh" scrolling="yes" frameborder="0" />
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>
<script>
import drag from '@/components/TableDrag/drag'
import { getLawItemDetail } from '@/api/law/law_provision'
import { kkfilePreview } from '@/utils/util'
import { getUrl } from '@/api/base/file.js'
import { Tp_provisionList } from '@/enumeration/Tp_provision'
export default {
  data() {
    return {
      keyword: '', //双向绑定检索关键词
      collapseKey: [], // 折叠面板key
      key: '1', // 卡片切换key
      customStyle:
        'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden;font-size:18px;font-weight: bold;',
      activeKey: [],
      descriptions: {
        docid: '', // 法律id
        name: '', //法律名称
        type: '', //法律性质
        pubunitname: '', //发布机关
        pubdate: '', // 发布日期
        status: '', // 有效性
        source: '', //来源途径
        pubcode: '', //发布文号
        fileid: '', //附件id
      },
      listData: [],
      loading: false,
      mixins: [drag],
      ubordered: true, // 表格边框是否显示
      fileUrl: '', //文件的预览地址
      Tp_provisionList: Tp_provisionList, // 法律条文类别
      provisionList: [], //法律条文类别下拉框数据
    }
  },
  components: {},
  created() {
    // 开始赋值
    this.init()
    this.getDetailData()
  },
  watch: {
    activeKey(key) {
      console.log(key)
    },
  },
  mounted() {},
  methods: {
    init() {
      this.descriptions.docid = this.$route.query.params.id
      this.descriptions.title = this.$route.query.params.title
      this.descriptions.type = this.$route.query.params.type_text
      this.descriptions.pubunitname = this.$route.query.params.pubunitname
      this.descriptions.pubdate = this.$route.query.params.pubdate
      this.descriptions.status = this.$route.query.params.status_text
      this.descriptions.source = this.$route.query.params.source_text
      this.descriptions.pubcode = this.$route.query.params.pubcode
      this.descriptions.fileid = this.$route.query.params.fileid
    },
    rowClassName(record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },
    handleBack() {
      // console.log('返回', this.$route.query)
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.params,
              tabkey: this.$route.query.tabkey,
            },
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.params,
            },
          })
        }
      } else {
        this.$router.go(-1)
      }
    },
    getFileUrl() {
      let _this = this
      getUrl({ id: this.descriptions.fileid }).then((res) => {
        if (res.code == 0) {
          _this.fileUrl = _this.getViewfileUrl(res.data)
          if (_this.fileUrl == '' || _this.fileUrl == null || _this.fileUrl == undefined) {
            _this.$message.error('当前文件的查看地址为空，无法查看')
          }
        } else {
          _this.$message.error('获取文件下载地址失败')
          _this.fileUrl = ''
        }
      })
    },
    /**
     * 获取kkfile预览的文件地址
     * @param {} url
     */
    getViewfileUrl(url) {
      return kkfilePreview(url)
    },
    // tab切换事件
    tabChange(key) {
      this.key = key
      if (key == '2') {
        if (this.descriptions.fileid != '' && this.descriptions.fileid != undefined) {
          this.getFileUrl()
        } else {
          this.$message.error('当前未上传附件')
          this.key = '1'
        }
      }
    },
    highlightKeyword(text) {
      
      if (this.keyword) {
        const regex = new RegExp(this.keyword, 'g'); // 使用 'g' 标志来匹配所有出现
        console.log('ssss')
        return text.replace(regex,  `<span style="background-color: yellow">${this.keyword}</span>`);
      } else {
        console.log('dddd')
        return text;
      }
    },
    /**
     * 获取法律条文的具体细项数据
     */
    getDetailData() {
      

      //通过id查询文书的条文
      getLawItemDetail( this.descriptions.docid,this.keyword).then((res) => {
        console.log('docid',this.descriptions.docid)
        console.log('keyword',this.keyword)

        if (res.code !== 0) {
          this.$message.error('获取数据失败')
        } else {
          console.log('res',res)
          // debugger
          this.listData = res.data
          // 默认展开全部的法规
          this.activeKey = []
          for (let index in this.listData) {
            this.activeKey.push(String(index))
          }
        }
      })
      //通过加条件关键字，对 条文内容进行相似度排序

    },

    /**
     * 有效性显示转换
     */
    typeLable(val) {
      for (let key in this.Tp_provisionList) {
        if (this.Tp_provisionList[key].value == val) {
          return this.Tp_provisionList[key].name
        }
      }
      return val
    },
        /**
     * 重置查询条件并查询数据
     */
     reQuery () {
        this.keyword = null
        this.getDetailData()
    },
  },
}
</script>

<style lang="less" scoped>

.collapseArea {
  border: none;
  background-color:rgb(247, 247, 247);
  //background-color:#fff;


  .ant-collapse-item {
    border-bottom: none;
  }

  /deep/ .ant-collapse-content {
    border-top: none;
  }
}

.collapseArea_header {
    font-family: Arial, sans-serif; /* 设置字体 */
    font-size: 20px; /* 设置字体大小 */
    font-weight: bold; /* 设置字体加粗 */

  .ant-form-item {
    margin-bottom: 0;
  }
}

.title_generateBtn {
  position: absolute;
  width: 200px;
  right: 225px;
}

.title_backBtn {
  position: absolute;
  width: 100px;
  right: 0;
}

.title_combination {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
}

.title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
}

.title_prefix {
  margin-top: 0.2%;
  width: 4px;
  height: 17px;
  background-color: #5b79fb;
}

.title_center {
  margin-left: 0.5%;
  font-size: 1.2rem;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.formBox,
.recordBox {
  min-height: 65vh;
}

.content-font-style {
  font-size: 16px;
  font-weight: bold;
}
</style>
